import { rootState } from "@/store";
import { usertype } from "@/store/reducers/home";
import { Select, DatePicker, message } from "antd";
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Edituserwrap } from "./style";
import moment from "moment";
import { getoneuserapi, updateuserapi, uploadavatar } from "@/apis/user";
import { loginpatch } from "@/store/action/home";
import { useNavigate } from "react-router-dom";
const { Option } = Select;
export default function Edituser() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { user } = useSelector((store: rootState) => ({
    user: store.home.user as usertype,
  }));
  const uploadref = useRef<HTMLInputElement>(null);
  //修改的新数据
  const [avatar, setAvatar] = useState<string>("");
  const [username, setUsername] = useState<string>("");
  const [sex, setSex] = useState<number>(0);
  const [introduction, setIntroduction] = useState<string>("");
  const [birthday, setBirthday] = useState<string>("");
  useEffect(() => {
    if (!user.id) return;
    setAvatar(user.avatar);
    setUsername(user.username);
    setSex(user.sex);
    setBirthday(user.birthday);
    setIntroduction(user.introduction);
  }, [user]);

  //上传头像
  const avatarchange = async (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    const formdata = new FormData();
    formdata.set("picture", e.target.files[0]);
    const re: any = await uploadavatar(formdata);
    setAvatar(re.result);
  };
  //保存修改
  const saveall = async () => {
    try {
      await updateuserapi(
        user.id,
        username,
        avatar,
        sex,
        introduction,
        birthday
      );
      //重新获取用户信息
      const re: any = await getoneuserapi(user.id);
      dispatch(loginpatch(re.result));
    } catch (e) {
      dispatch(loginpatch({}));
      navigate("/");
      message.error("身份失效");
    }
  };
  return (
    <Edituserwrap>
      {/* 上传头像的 */}
      <input type="file" ref={uploadref} onChange={avatarchange} hidden />
      <div className="title">个人资料</div>
      {!(
        avatar === user.avatar &&
        username === user.username &&
        sex === user.sex &&
        birthday === user.birthday &&
        introduction === user.introduction
      ) && <button onClick={saveall}>保存修改</button>}
      <div className="avatar">
        <span>头像</span>
        <img src={avatar} alt="" />
        <span onClick={(e) => uploadref.current?.click()}>点击上传</span>
      </div>
      <div className="username">
        <span>用户名字</span>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <span className="iconfont icon-bianjisekuai"></span>
      </div>
      <div className="sex">
        <span>性别</span>
        <Select
          defaultValue={sex + ""}
          style={{ width: 120 }}
          onChange={(value) => setSex(parseInt(value))}
        >
          <Option value="0">男</Option>
          <Option value="1">女</Option>
        </Select>
        <span className="iconfont icon-bianjisekuai"></span>
      </div>
      <div className="birthday">
        <span>生日</span>
        <DatePicker
          allowClear={false}
          value={moment(new Date(birthday))}
          onChange={(value) => setBirthday(value?.toString() as string)}
        ></DatePicker>
        <span className="iconfont icon-bianjisekuai"></span>
      </div>
      <div className="introduction">
        <span>个人介绍</span>
        <input
          type="text"
          value={introduction}
          onChange={(e) => setIntroduction(e.target.value)}
        />
        <span className="iconfont icon-bianjisekuai"></span>
      </div>
    </Edituserwrap>
  );
}
